<template>
  <div class="app-container">
    <!-- 搜索栏 -->
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="姓名" prop="realName">
        <el-input v-model="queryParams.realName" clearable placeholder="请输入姓名" style="width: 240px" @change="handQuery" />
      </el-form-item>
      <el-form-item label="状态" prop="statusList">
        <el-select
          v-model="queryParams.statusList"
          multiple
          clearable
          collapse-tags
          collapse-tags-tooltip
          placeholder="请选择状态"
          style="width: 240px"
          @change="handQuery"
          :max-collapse-tags="2"
        >
          <el-option label="待审核" :value="0"></el-option>
          <el-option label="已通过" :value="1"></el-option>
          <el-option label="已拒绝" :value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="申请时间" prop="dateRange" style="width: 308px">
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          value-format="YYYY-MM-DD"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="handQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 操作按钮 -->
    <el-row :gutter="10" class="mb8">
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
    </el-row>

    <!-- 数据表格 -->
    <el-table v-loading="loading" :data="applicationList">
      <el-table-column align="center" label="申请人" :show-overflow-tooltip="true" v-if="columns.applicant.visible">
        <template #default="scope">
          <div style="display: flex; align-items: center; gap: 8px;">
            <el-avatar
              :size="40"
              :src="scope.row.avatar"
              fit="cover"
              style="flex-shrink: 0;"
            />
            <span class="user-name">{{ scope.row.realName || '-' }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="idCard" align="center" label="身份证号" :show-overflow-tooltip="true" v-if="columns.idCard.visible"></el-table-column>
      <el-table-column prop="phone" align="center" label="手机号" :show-overflow-tooltip="true" v-if="columns.phone.visible"></el-table-column>
      <el-table-column prop="sex" align="center" label="性别" v-if="columns.sex.visible">
        <template #default="scope">
          <el-tag :type="scope.row.sex === 1 ? 'primary' : 'success'">
            {{ scope.row.sex === 1 ? '男' : '女' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="age" align="center" label="年龄" v-if="columns.age.visible">
        <template #default="scope">
          <span>{{ getAge(scope.row.birthday) || '--' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" align="center" label="状态" v-if="columns.status.visible">
        <template #default="scope">
          <el-tag :type="getStatusTagType(scope.row.status)">{{ getStatusText(scope.row.status) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" align="center" label="申请时间" width="180" v-if="columns.createTime.visible"></el-table-column>
      <el-table-column align="center" label="操作" class-name="small-padding fixed-width" width="220" v-if="columns.action.visible">
        <template #default="scope">
          <el-button link type="primary" icon="View" @click="handleView(scope.row)">查看详情</el-button>
          <el-button v-if="scope.row.status === 0" link type="primary" icon="Finished" @click="handleCheck(scope.row)">审核</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
    
    <!-- 详情对话框 -->
    <ApplicationDetailDialog 
      :detailDialogVisible="detailDialogVisible"
      :applicationId="currentApplicationId"
      @handleClose="handleApplicationDetailClose"
    />

    <!-- 审核对话框 -->
    <ApplicationReviewDialog 
      :reviewDialogVisible="reviewDialogVisible"
      :applicationId="currentApplicationId"
      @handleClose="handleApplicationReviewClose"
      @success="onReviewSuccess"
    />
  </div>
  
</template>

<script setup name="Application">
import { listApplication } from '@/api/application/application'
import ApplicationDetailDialog from './components/ApplicationDetailDialog.vue'
import ApplicationReviewDialog from './components/ApplicationReviewDialog.vue'
import { getAge } from '@/utils/caculateAge'

const { proxy } = getCurrentInstance();

const showSearch = ref(true);
const dateRange = ref([]);
const applicationList = ref([]);
const loading = ref(true);
const total = ref(0);
const detailDialogVisible = ref(false);
const currentApplicationId = ref(null);
const reviewDialogVisible = ref(false);

// 列显隐信息
const columns = ref({
  applicant: { label: '申请人', visible: true },
  idCard: { label: '身份证号', visible: true },
  phone: { label: '手机号', visible: true },
  sex: { label: '性别', visible: true },
  age: { label: '年龄', visible: true },
  status: { label: '状态', visible: true },
  createTime: { label: '申请时间', visible: true },
  action: { label: '操作', visible: true },
});

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    realName: undefined,
    statusList: [],
    startTime: undefined,
    endTime: undefined,
  }
});

const { queryParams } = toRefs(data);

// 状态映射
const getStatusText = (status) => {
  const statusMap = {
    0: '待审核',
    1: '已通过',
    2: '已拒绝'
  }
  return statusMap[status] || '--';
}

const getStatusTagType = (status) => {
  const statusMap = {
    0: 'warning',
    1: 'success',
    2: 'danger'
  }
  return statusMap[status] || 'info';
}
const getList = () => {
  loading.value = true;
  if (dateRange.value && dateRange.value.length === 2) {
    queryParams.value.startTime = dateRange.value[0] + ' 00:00:00'
    queryParams.value.endTime = dateRange.value[1] + ' 00:00:00'
  } else {
    queryParams.value.startTime = undefined;
    queryParams.value.endTime = undefined;
  }
  listApplication(queryParams.value).then(res => {
    applicationList.value = res.rows || [];
    total.value = res.total || 0;
    loading.value = false;
  }).catch(() => {
    loading.value = false;
  })
}

const handQuery = () => {
  queryParams.value.pageNum = 1;
  getList();
}

const resetQuery = () => {
  dateRange.value = [];
  queryParams.value.startTime = undefined;
  queryParams.value.endTime = undefined;
  proxy.resetForm('queryRef');
  handQuery();
}

const handleView = (row) => {
  currentApplicationId.value = row.id;
  detailDialogVisible.value = true;
}

const handleCheck = (row) => {
  currentApplicationId.value = row.id;
  reviewDialogVisible.value = true;
}


const onReviewSuccess = () => {
  proxy.$modal.msgSuccess('审核成功');
  getList();
}

const handleApplicationReviewClose = () => {
  reviewDialogVisible.value = false;
  currentApplicationId.value = undefined;
}

const handleApplicationDetailClose = () => {
  detailDialogVisible.value = false;
  currentApplicationId.value = undefined;
}

getList();
</script>

<style scoped lang="scss">
.user-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>